<template>
  <div>
    <div class="backbox">
      <van-icon
        name="arrow-left"
        size="0.8rem"
        class="iconsvg"
        @click="backlink()"
      />
      <div class="title">助教资料</div>
    </div>
    <div>
      <van-cell center title="头像" @click="this.avatarshow = true">
        <template #right-icon>
          <van-image width="1.5rem" height="1.5rem" fit="cover" v-lazy="image" />
        </template>
      </van-cell>
      <van-action-sheet
        v-model:show="avatarshow"
        :actions="avataractions"
        cancel-text="取消"
        close-on-click-action
        @select="onAvatarSelect"
      />
      <input
        type="file"
        ref="inputFile"
        @change="changeImg"
        style="display: none"
      />
      <van-cell title="姓名" :value="name" @click="changerealname" />
      <van-cell title="昵称" :value="nickname" @click="changenickname" />
      <van-cell title="年龄" :value="gender" @click="this.gendershow = true" />
      
      <van-action-sheet
        v-model:show="gendershow"
        :actions="genderactions"
        cancel-text="取消"
        close-on-click-action
        @select="onGenderSelect"
      />

      <van-cell
        title="出生日期"
        :value="birth"
        @click="this.birthshow = true"
      />
      <van-popup v-model:show="birthshow" position="bottom">
        <van-date-picker
          @confirm="onDayConfirm"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="birthshow = false"
        />
      </van-popup>

      <van-cell title="所在城市" :value="city" @click="this.areashow = true" />
      <van-popup v-model:show="areashow" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onAreaConfirm"
          @cancel="areashow = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { showToast } from "vant";
import { areaList } from "@vant/area-data";
import {
  editfulltimeimg,
  editfulltimeage,
  editfulltimephone,
  editfulltimewechat,
  editfulltimenickname,
  editfulltimename,
} from "@/http/request.js";
import { useStore } from "@/store/index.js";
export default {
  data() {
    return {
      userid: "",
      image: "",
      nickname: "",
      gender: "",
      birth: "",
      city: "",
      avatarshow: false,
      avataractions: [{ name: "从手机相册选择" }],
      genderactions: [{ name: "男" }, { name: "女" }, { name: "保密" }],
      gendershow: false,
      birthshow: false,
      areashow: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      areaList,
    };
  },
  methods: {
    inituserinfo() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      this.nickname = userinfo.nickname;
      this.gender = userinfo.gender;
      this.birth = userinfo.birth;
      this.userid = userinfo.id;
      this.city = userinfo.city;
      this.image = userinfo.image;
    },
    onAvatarSelect(value) {
      this.$refs.inputFile.click();
      this.avatarshow = false;
      // showToast(value.name);
    },
    changeImg() {
      const file = this.$refs.inputFile.files[0];
      const formdata = new FormData();
      formdata.append("image", file);
      formdata.append("id", this.userid);
      userimageedit(formdata).then((res) => {
        if (res.code == 0) {
          this.image = res.data.path;
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.image = res.data.path;
          store.setUserinfo(userinfo);
          showToast(res.msg);
        } else {
          showToast(res.msg);
        }
      });
    },

    onGenderSelect(value) {
      var genderid = 0;
      // 2是保密 1是男 0是女
      if (value.name == "男") {
        genderid = 1;
      } else if (value.name == "女") {
        genderid = 0;
      } else {
        genderid = 2;
      }
      editgender({ id: this.userid, gender: genderid }).then((res) => {
        if (res.code == 0) {
          showToast(res.msg);
          this.gender = value.name;
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.gender = value.name;
          store.setUserinfo(userinfo);
        } else {
          showToast(res.msg);
        }
      });
      this.avatarshow = false;
    },
    onDayConfirm(value) {
      this.birth = value.selectedValues.join("/");
      this.birth = this.formatDate(this.birth);
      editbirth({ id: this.userid, birth: this.birth }).then((res) => {
        if (res.code == 0) {
          showToast(res.msg);
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.birth = this.birth;
          store.setUserinfo(userinfo);
        } else {
          showToast(res.msg);
        }
      });
      this.birthshow = false;
    },
    onAreaConfirm(value) {
      this.city = value.selectedOptions.map((item) => item.text).join("/");
      editcity({ id: this.userid, city: this.city }).then((res) => {
        if (res.code == 0) {
          showToast(res.msg);
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.city = this.city;
          store.setUserinfo(userinfo);
        } else {
          showToast(res.msg);
        }
      });
      this.areashow = false;
    },

    formatDate(date) {
      const timestamp = Date.parse(date);
      const dateObject = new Date(timestamp);
      const year = dateObject.getFullYear();
      const month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
      const day = dateObject.getDate().toString().padStart(2, "0");
      const formattedDate = `${year}-${month}-${day}`;
      return formattedDate;
    },

    backlink() {
      this.$router.back();
    },

    changenickname() {
      this.$router.push("changenickname");
    },
  },
  mounted() {
    this.inituserinfo();
  },
};
</script>

<style scoped>
.backbox {
  width: 100%;
  background-color: #969799;
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconsvg {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
}
.backbox .title {
  font-size: 24px;
}
.editform {
  height: 800px;
}
</style>